<script setup>
  import { ref } from 'vue';
  import {apigetBanner,apigetDayrandomr,apigetnoticeList,apiClassIfy} from '@/api/apis.js'
  import{ onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
  
    // 点击跳转到 preview页面
  const gopreview=(id)=>{
    uni.setStorageSync('StorgClassList',dataDayrandom.value)
    uni.navigateTo({
      url:"/pages/preview/preview"
    })
  } 
  
  // 首页海报列表
  const dataPrice = ref([])
  const getBanner = async ()=>{
     const res = await apigetBanner()
     dataPrice.value = res.data
  }
  getBanner()
  
  // 随机9张壁纸
  const dataDayrandom = ref([])
  const getDayrandomr = async()=>{
        const res = await apigetDayrandomr()
        dataDayrandom.value = res.data
  } 
  getDayrandomr()
  
  // 获取公告
  const noticeList = ref([])
  const getnoticeList=async()=>{
       const res = await apigetnoticeList({select:true})
       noticeList.value = res.data
  }
  getnoticeList()
  
  // 获取分类
  const  ClassIfyList = ref([])
  const getClassIfy = async()=>{
       const res = await apiClassIfy({pageSize:15})
       ClassIfyList.value = res.data
  }
  getClassIfy()
  // 分享给好友
  onShareAppMessage((e)=>{
    console.log(e);
    return {
      title:"咸虾米壁纸",
      path:'/pages/index/index'
    }
  })
  
  // 分享到朋友圈
  onShareTimeline((e)=>{
    console.log(e);
    return {
      title:"咸虾米壁纸",
      imageUrl:'/static/images/xxmLogo.png'
    }
  })
</script>

<!-- 首页 -->
<template>
	<view class="homeLayout pagebg">
    <custom-nav-bar title="推荐"></custom-nav-bar>
    <view class="banner">
      <swiper  circular interval="2000" :duration="1000" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay="">
        <swiper-item v-for="item in dataPrice" :key="item._id">
            <image :src="item.picurl" mode="aspectFill"></image>
        </swiper-item>
       
      </swiper>
    </view>
    
    <!-- 公告 -->
    <view class="notice">
      <view class="left">
        <uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
        <text class="text">公告</text>
      </view>
      <view class="center">
        <!--  duration延迟时间 circular衔接-->
        <swiper circular autoplay :interval="1500" duration="300" vertical >
          <swiper-item v-for="item in noticeList" :key="item._id">
            <navigator url="/pages/notice/detail">
                  <view class="swiper-item">{{item.title}}</view>
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <view class="right"> 
          <uni-icons type="right" size="16" color="#333"></uni-icons>
      </view>
    </view>
    
    <!--  -->
    <view class="select">
      <common-title>
        <template #name>每日推荐</template>
        <template #custom>
          <view class="date">
                <uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
                <uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
          </view>
        </template>                         
      </common-title> 
      <view class="content">
        <scroll-view scroll-x>
          <view class="box" v-for="item in dataDayrandom" :key="item._id" @click="gopreview(item._id)" >
            <image :src="item.smallPicurl" mode="aspectFill"></image>
          </view>
        </scroll-view>
      </view>
    </view>
    
    
    <view class="theme">
      <!-- 头部 -->
      <common-title>
        <template #name>专题精选</template>
        <template #custom>
          <navigator url="" class="more">More+</navigator>
        </template>
      </common-title>
      
      <view class="content">
          <theme-item v-for="item in ClassIfyList" :key="item._id" :ClassIfyList='item'></theme-item>
          <theme-item :isMore="true"></theme-item>
      </view>
      
    </view>
    
  </view>
</template>


<style scoped lang="scss">
	.homeLayout{
    .theme{
      padding: 50rpx 0 ;
      .more{
        font-size: 32rpx;
        color: #888;
      }
      .content{
        margin-top: 30rpx;
        padding: 0 30rpx;
        display: grid;
        grid-template-columns: repeat(3 ,1fr);
        gap: 15rpx;
      }
    }
    .select{
      margin-top: 50rpx;
      .date{
        color:$brand-theme-color;
        uni-dateformat{
          margin-left: 5rpx;
        }
      }
      .content{
        width: 720rpx;
        margin-left: 30rpx;
        margin-top: 30rpx;
        scroll-view{
          white-space: nowrap;
          .box{
            width:200rpx;
            height: 430rpx;
            display: inline-block;
            margin-right: 15rpx;
            image{
              width: 100%;
              height: 100%;
              border-radius: 15rpx;
            }
          }
          .box:last-child{margin-right: 30rpx;}
        }
      }
    }
    .notice{
      width: 690rpx;
      height: 80rpx;
      background-color: #f9f9f9;
      margin: 0 auto;
      border-radius: 80rpx;
      display: flex;
      line-height: 80rpx;
      .left{
        width: 140rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .uni-icons{color: $brand-theme-color !important;}
        .text{
          color: $brand-theme-color;
          font-weight: 600;
          font-size: 28rpx;
        }
      }
      .center{
        flex: 1;
        swiper{
          height: 100%;
          &-item{
            height: 100%;
            color: #666;
            font-size: 30rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            
          }
        }
      }
      .right{
        width: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .banner{
      width: 750rpx;
      height: 30rpx 0;
      swiper{
        width: 750rpx;
        height: 340rpx;
        &-item{
          width: 100%;
          height: 100%;
          padding: 0 30rpx;
          image{
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }
      }
    }
  }
</style>
